<template>
	<div class="nav">
		<div class="first-router">
			<div class="left">
				<router-link :class="{ active: currentIndex === 1 }" to="/"
					>首页</router-link
				>
				<router-link :class="{ active: currentIndex === 2 }" to="/pins"
					>沸点</router-link
				>
				<router-link
					:class="{ active: currentIndex === 3 }"
					to="/topics"
					>话题</router-link
				>
			</div>
			<div class="right">
				<div class="search">
					<input type="text" placeholder="探索" />
					<img src="../../../assets/search.svg" alt="" />
				</div>
				<!-- <button @click="showLogin()">登录</button> -->
				<button>写文章</button>
				<button @click="showLogin()">注册</button>
			</div>
		</div>
		<div class="second-router" v-if="subNav">
			<div class="left">
				<router-link
					v-for="(item, i) in subNav"
					:to="item.path"
					:key="i"
					>{{ item.text }}</router-link
				>
			</div>
			<div class="right" >
				标签管理
			</div>
		</div>
		<login-alert v-show="isLoginShow" @hideLogin="hide"></login-alert>
	</div>
</template>
<script>
import LoginAlert from "@/components/Alert/Login/Index.vue";
export default {
	components: { LoginAlert },
	data() {
		return {
			currentIndex: 1, // 当路由为/,/frontend,/backend,/andriod
			name: 123,
			isLoginShow: false,
		};
	},
	props: ["subNav"],
	created() {},
	watch: {
		$route: {
			handler(newVal, oldVal) {
				this.currentIndex = newVal.meta.parentId;
			},
			deep: true,
			immediate: true, // 立刻
		},
	},
	methods: {
		showLogin() {
			this.isLoginShow = true;
		},
		hide() {
			this.isLoginShow = false;
		},
	},
};
</script>
<style lang="scss" scoped>
a {
	color: #2c3e50;

	font-size: 16px;
	text-decoration: none;
	&.active {
		color: rgb(0, 127, 255);
	}
	&.router-link-exact-active {
		color: rgb(0, 127, 255);
	}
}
.nav {
	width: 960px;
	margin: 0 auto;

	.first-router {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 60px;
		position: relative;
		&::after {
			content: "";
			display: block;
			position: fixed;
			width: 100vw;
			height: 1px;
			left: 0;
			top: 60px;
			background-color: rgb(244, 245, 245);
		}
		a {
			margin-right: 15px;
		}
		.right {
			display: flex;
			align-items: center;
			.search {
				display: flex;
				align-items: center;
				margin-right: 20px;
				padding-right: 5px;
				border: 1px solid rgba(0, 0, 0, 0.2);
				border-radius: 3px;
				background: rgb(249, 250, 251);
				input {
					border: none;
					display: inline-block;
					line-height: 30px;
					height: 30px;
					border-radius: 3px;
					padding: 3px 5px;
					outline: none;
					box-sizing: border-box;
				}
				img {
					width: 15px;
					height: 15px;
				}
			}
			button {
				display: inline-block;
				line-height: 30px;
				height: 30px;
				border: none;
				outline: none;
				background: rgb(0, 127, 255);
				margin-right: 10px;
				border-radius: 5px;
				color: #fff;
				font-size: 10px;
				width: 60px;
			}
		}
	}
	.second-router {
		height: 45px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 10px;
		a {
			margin-right: 10px;
			font-size: 12px;
		}
		&::after {
			content: "";
			position: fixed;
			width: 100vw;
			height: 1px;
			background-color: rgb(244, 245, 245);
			left: 0;
			top: 100px;
		}
	}
}
</style>
